<template>
  <view class="form-box" :data-theme="cueTheme">
    <custom-navbar :title="title" />
    <basic-components />

    <view class="form-item">
      <view class="basic-row">
        <view class="title ">
          <text class="iconfont icon-bitian1 require" />
          <image class="image" src="~@/static/img/task2.png" />
          任务名称
        </view>
        <view class="value">
          <uni-easyinput v-model="addForm.form.taskName" :clearable="false" placeholder="请输入任务名称" />
        </view>
      </view>

      <view class="basic-row">
        <view class="title ">
          <text class="iconfont icon-bitian1 require" />
          <image class="image" src="~@/static/img/date2.png" />
          预计耗时
        </view>
        <view class="value">
          <uni-easyinput v-model="addForm.form.planTime" :clearable="false" placeholder="耗时(m)" />
        </view>
      </view>

      <view class="basic-row">
        <view class="title ">
          <text class="iconfont icon-bitian1 require" />
          <image class="image" src="~@/static/img/type.png" />
          任务类型
        </view>
        <view class="value">
          <uni-data-select v-model="addForm.form.taskType" :localdata="taskTypeOp" />
        </view>
      </view>

      <view class="basic-row">
        <view class="title ">
          <image class="image" src="~@/static/img/priority.png" />
          优先级
        </view>
        <view class="priority">
          <uni-rate v-model="addForm.form.priority" :max="3" />
        </view>
      </view>
    </view>

    <view class="segmentation">
      <view class="line" />
      <view class="text">
        图标颜色调整
      </view>
      <view class="line" />
    </view>
    <view class="task-icon-color">
      <view class="title">
        <image class="image m-r-5" src="~@/static/img/color.png" />
        挑选颜色(可选)<text class="m-l-5 hint">
          往左滑选择更多颜色
        </text>
      </view>

      <view class="color">
        <view v-for="item in colors" :key="item" :class="[item === addForm.form.selctColor ? 'is-border' : '']"
          @tap="selctColor(item, 'color')">
          <view :style="colorStyle(item)" />
        </view>
      </view>

      <view class="title m-b-5">
        <image class="image m-r-5" src="~@/static/img/icon.png" />
        挑选图标(可选)
        <text class="m-l-5 hint">
          往左滑选择更多图标
        </text>
      </view>
      <view class="icon">
        <view v-for="(img, key) in icons" :key="key"
          :class="[img.name === addForm.form.selectBg ? 'is-border is-bg' : '']" @tap="selctColor(img.name, 'icon')">
          <image class="image" :src="img.url" />
        </view>
      </view>
    </view>

    <view class="btn" @tap="save">
      <view>
        保存
      </view>
    </view>
  </view>
</template>

<script>
import { getFiles } from "@/utils/getFiles"
const files = require.context("./mixins", false, /\.js$/)
const mixins = getFiles(files)

export default {
  mixins: [...mixins],
  onLoad(options) {
    this.init(options)
  },
}
</script>

